<template>
  <div>
    <el-row>
      <el-form label-width="110px" :model="form">
        <el-col
          v-for="(item, colIndex) in formList"
          :md="8"
          :sm="24"
          :xl="(colIndex + 1) % 5 === 0 ? 5 : 5"
          :xxl="(colIndex + 1) % 5 === 0 ? 5 : 5"
        >
          <el-form-item :label="item.label" v-if="item.type === 'input'">
            <el-input
              v-model="form[item.name]"
              :placeholder="item.placeholder"
            />
          </el-form-item>
          <el-form-item
            :label="item.label"
            v-if="item.type === 'select' && item.selectObj"
          >
            <c-select
              v-model="form[item.name]"
              :placeholder="item.placeholder"
              :selectObj="item.selectObj"
            ></c-select>
          </el-form-item>

          <el-form-item :label="item.label" v-if="item.type === 'dateRange'">
            <el-date-picker
              v-model="form[item.name]"
              type="daterange"
              :start-placeholder="item.startPlaceHolder || ''"
              :end-placeholder="item.endPlaceholder || ''"
              :default-value="item.defaultValue"
              @change="dateRangeChange(item)"
            />
          </el-form-item>
        </el-col>
        <el-col :md="8" :sm="24" :xl="5" :xxl="5">
          <div class="buttonls">
            <el-button @click="refreshTable" class="button searchButton"
              >查 询</el-button
            >
            <el-button
              @click="clearAllDefaultBtn"
              style="margin-left: 0.8rem"
              class="button resetButton"
              >重 置</el-button
            >
          </div>
        </el-col>
      </el-form>
    </el-row>
    <el-row> <slot name="otherList" class="otherButton"></slot></el-row>
  </div>
</template>

<script setup lang="ts">
import CSelect from "../CSelect/index.vue";
const emits = defineEmits(["searchTable"]);
import moment from "moment";
const props = defineProps({
  formList: {
    default: [],
    type: Array,
  },
});
const form = ref({});
/* 查询按钮查询方法 */
const refreshTable = () => {
  emits("searchTable", form.value);
};
const clearAllDefaultBtn = () => {
  form.value = {};
};
const dateRangeChange = (item) => {
  if (form.value[item.name].length > 0) {
    form.value[item.startName] = moment(form.value[item.name][0]).format(
      "YYYYMMDD"
    );
    form.value[item.endName] = moment(form.value[item.name][1]).format(
      "YYYYMMDD"
    );
  }
};
</script>

<style scoped lang="scss">
:deep(.el-form) {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.main {
  .buttonls {
    display: flex;
    justify-content: center;
    .button {
      width: 100px;
      height: 34px;
      border-radius: 2px;
      font-size: 14px;
      font-family: MicrosoftYaHei;
    }
    .searchButton {
      background-color: $themeBlue;
      color: #ffffff;
    }
  }
  .otherButton {
  }
}
</style>
